/*
  学习目标：动态路由-以及参数获取
*/
import React, { Component } from 'react';
import './index.css';
import { BrowserRouter as Router, Route, Link, NavLink, Switch, Redirect } from 'react-router-dom';
export default class App extends Component {
  render() {
    return (
      <Router>
        <NavLink to="/my">点我调到我的</NavLink>

        <div>
          <Switch>
            {/* 1. 改造路由的path属性 语法：path="/路径/:自定义属性名" */}
            <Route path="/my/:id" component={MyMusic}></Route>
          </Switch>
          <Header></Header>
        </div>
      </Router>
    );
  }
}

function MyMusic({ match }) {
  // 2. 通过props.match.params.自定义属性名， 获取动态路由的参数值
  console.log('params  ----->  ', match.params.id);
  return <h1>我是我的音乐件 </h1>;
}
